<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            data与el的2种写法
            <br>
            1.el有2种写法
            (1).new Vue时候配置el属性。
            (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
            <br>
            2.data有2种写法
            (1).对象式
            (2).函数式如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
            <br>
            
            3.一个重要的原则:
    
            由Vue管理的函数，一定不要写箭头所数，一日写了箭头函数，this就不再是Vue实例了(而是 指向的window)。
        </p>
        <h1>{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    //el 的两种写法
    //第一种：
    new Vue({
        el: '#app',
        data: {
            name: '张三'
        }
    });
    //第二种：使用 实例对象 进行挂载
    const vm = Vue({
        // el: '#app',
        data: {
            name: '张三'
        }
    })
	console.log(vm);
	vm.$mount("#app");
//------------------------------------------------------------------------------------
    //data 的两种写法
    //第一种：对象式
    new Vue({
        el: '#app',
        data: {
            name: '张三',
            url: 'http://www.baidu.com'
        }
    });
    //////////////////////////////////////////////////////////////////////
    //第二种：函数式(组件的时候 必须使用函数式)
    new Vue({
        el: '#app',
        data: function () { 
            //这里的函数不能写成 () => {} 箭头函数，如果写的箭头函数，this指向window 
            //写成 function () {} this 指向的就是Vue 实例对象
            console.log("@@@",this);
            //这里必须返回一个对象
            return {
                name: '张三',
                url: 'http://www.baidu.com'
            }
        }
    });




</script>
</html>